<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>stars</title>
    <style>
        @-webkit-keyframes star-opacity {
            0% {
                opacity: 0
            }

            40% {
                opacity: 1
            }

            60% {
                opacity: 1
            }

            100% {
                opacity: 0
            }
        }

        @keyframes star-opacity {
            0% {
                opacity: 0
            }

            40% {
                opacity: 1
            }

            60% {
                opacity: 1
            }

            100% {
                opacity: 0
            }
        }

        @-webkit-keyframes star-pos {
            0% {
                transform: scale(0) rotate(0) translate3d(0, 0, 0);
                -webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
                -moz-transform: scale(0) rotate(0) translate3d(0, 0, 0)
            }

            100% {
                transform: scale(1) rotate(0) translate3d(-450px, 450px, 0);
                -webkit-transform: scale(1) rotate(0) translate3d(-450px, 450px, 0);
                -moz-transform: scale(1) rotate(0) translate3d(-450px, 450px, 0)
            }
        }

        @keyframes star-pos {
            0% {
                transform: scale(0) rotate(0) translate3d(0, 0, 0);
                -webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
                -moz-transform: scale(0) rotate(0) translate3d(0, 0, 0)
            }

            100% {
                transform: scale(1) rotate(0) translate3d(-450px, 450px, 0);
                -webkit-transform: scale(1) rotate(0) translate3d(-450px, 450px, 0);
                -moz-transform: scale(1) rotate(0) translate3d(-450px, 450px, 0)
            }
        }

        body {
            padding: 0;
            margin: 0;
        }

        .index-bg {
            width: 100vw;
            height: 100vh;
            background: linear-gradient(-225deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%);
        }

        .index-bg .stars {
            height: 0
        }

        .index-bg .star {
            display: block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #fff;
            top: 100px;
            left: 400px;
            position: relative;
            -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
            -webkit-animation: star-opacity 5s infinite ease-in, star-pos 5s infinite ease-in;
            animation: star-opacity 5s infinite ease-in, star-pos 5s infinite ease-in;
            -webkit-box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
            box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
            opacity: 0;
            z-index: 2
        }

        .index-bg .star:after {
            content: '';
            display: block;
            top: 0;
            left: 4px;
            border: 0 solid #fff;
            border-width: 0 90px 2px;
            border-color: transparent transparent transparent rgba(255, 255, 255, .3);
            -webkit-transform: rotate(-45deg) translate3d(1px, 3px, 0);
            transform: rotate(-45deg) translate3d(1px, 3px, 0);
            -webkit-box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
            box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
            -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%
        }
    </style>
</head>

<body>
    <div class="index-bg">
        <div class="stars">
            <div class="star"></div>
            <div class="star" style="top: 80px; left: 800px; animation-delay: 3s;"></div>
            <div class="star" style="top: 40px; left: 646px; animation-delay: 2s;"></div>
            <div class="star" style="top: 120px; left: 395px; animation-delay: 4s;"></div>
            <div class="star" style="top: 160px; left: 765px; animation-delay: 1s;"></div>
            <div class="star" style="top: 170px; left: 1200px; animation-delay: 2s;"></div>
            <div class="star" style="top: 200px; left: 1000px; animation-delay: 1s;"></div>
        </div>
    </div>
</body>

</html>